(Esquinas redondeadas con CSS)

-moz-border-radius es una propiedad que nos permite redondear esquinas con CSS, sin embargo esta propiedad no es una propiedad standar y eso hace que no todos los navegadores la admitan.

Uno de esos navegadores es Explorer, se esperaba que con la nueva versión 8 este problema se solucionara pero al parecer no ha sido así.

Los usuarios de Firefox podemos seguir usando border-radius sin problemas. Safari y Google Chrome al estar basados en el motor Webkitlos de Safari lo verán si añadimos -webkit-border-radius

-moz-border-radius: 15px; (para Firefox)
-webkit-border-radius: 15px; (para Safari y Google Chrome)
Debemos tener en cuenta que con Explorer esas esquinas redondeadas se verán líneas rectas, no hay vuelta de hoja ni podemos conseguir que se vea igual con todos los navegadores a no ser que utilicemos imágenes o Javascript.

En una entrada pasada hablábamos sobre border-radius decíamos que para redondear esquinas con css era suficiente añadíamos algo así:


-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;

Naturalmente deberíamos añadirlo en los estilos donde deseamos redondear las esquinas. Poniendo siempre como ejemplo una plantilla Minima en la sidebar sería así:


#sidebar-wrapper {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
más estilos...
}

En los post:
.post {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
más estilos...
}

Si deseamos que la curva sea más o menos cerrada podemos variar 15px y probar con cualquier otro valor.


Es bastante sencillo de comprender, pero siempre quedan dudas, una de esas dudas ha llegado a mi correo y hace poco la formulaban en un comentario ¿puedo hacer que algunas esquinas sean redondas y dejar otras sin redondear? se puede hacer y vamos a hacerlo.


Con -moz-border-radius estamos redondeando las esquinas pero es obvio que para redondearlas necesitamos un borde, lo añadimos con border:3px solid #cc6666 de esa forma estamos diciendo que el borde tiene de grosor 3px el tipo de borde es solid y el color #cc6666.


TODAS LAS ESQUINAS CURVAS
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;

INFERIOR IZQUIERDA
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
border: 3px solid #cc6666;

INFERIOR DERECHA
-moz-border-radius-bottomright: 15px;
-webkit-border-radius-bottomright: 15px;
border: 3px solid #cc6666;

SUPERIOR IZQUIERDA
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
border: 3px solid #cc6666;

SUPERIOR DERECHA
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
border: 3px solid #cc6666;

El secreto no es otro que jugar y probar, si añadimos

-moz-border-radius-bottomleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topright: 15px;
border: 3px solid #cc6666;

se vería esto:

También es posible hacerlo con una sola línea en ese caso nos olvidamos de lo anterior, y añadimos

-moz-border-radius: 5px 30px 5px 30px;

consideramos que de izquierda a derecha nos estamos refiriendo a:
izquierda-superior - derecha-superior - derecha-inferior - izquierda-inferior

¿Y si quiero redondear un div?

Podemos redondear las esquinas de un div usando CSS, añadimos el div en cualquier sitio, entradas, gadgets de HTML, plantilla...

<div class="esquinas-redondas">Este div tiene las esquinas redondas</div>

.esquinas-redondas{
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 1px solid #000;
background-color: #cc6666;
color:#fff;
padding: 30px;
}

Recuerda que si eres usuario de Explorer verás en los siguientes ejemplos líneas rectas.


Este div tiene las esquinas redondas

Se añadió padding: 30px; para dejar espacio entre el contenido y el div.

Pongamos que queremos seguir jugando.

.esquinas-redondas{
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 4px double #111;
color:#fff;
font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;
font-size: 23px;
background:url('url de la imagen');
padding:30px;
}


Este div tiene las esquinas redondas


Y pongamos que seguimos otro día ...

EM2.0

Esto me recuerda un problemilla que tengo y no se bien si se solucionaría así o somo. Me explico: cuando quise poner bordes en las imágenes eche un vistazo a una entrada que tienes, y como me gusto lo del doble borde igual para todas las entradas lo puse en la plantilla. La cuestión es que cuando cuelgo un botón de enlace claro me lo reconoce como imagen igual, y no se como quitarlo porque me queda enmarcado y con el fondo blanco. (echa un vistazo a cualquiera de mis entradas y verás a que me refiero) ¿Que se te ocurre?. Un beso y gracias por tu tiempo. La pesada de siempre.

Responder
Nessa

este tema me gusta ;)
aunq mi sidebar y entradas no tienen bordes..pero cn este estilo esta bueno..tal vez le agregue =D

Gem@ si me ocurre cn todos los gadget...antes habia puesto solo un texto y tb..queda ese espacio, q encima cuando usas el menu se expande mas :S
Yo creo q es algo especifico cn el menu desplegable, por que cuando edite la plantilla paso a paso para ver q podia ser el gadget me quedaba de lujo..y una vez puesto el menu se desplazo.

http://fontsbritney.blogspot.com/

Responder
Juliana

Gracias, Gema :)

Responder
Admin

Hola gemit@ no me acuerdo si te agradecí por poner a FolkTango en el blog de la semana, sino lo hice, millones de gracias!! ;)

No sabés la cantidad de gente que entra desde aquí, es una muy buena promoción :D
Te cuento que ayer estube modificando el diseño, le ensanché la plantilla y cambié el banner de la cabecera, si querés pasarte a darme tu opinión se agradece ;)

Ahh ya que estoy, las pestañitas de la widetab me quedan un poco pequeñas a pesar de haberles puesto palabras o títulos mas grandes, hay alguna forma de que sean mas grandes? O de agregarle mas pestañas?
Besote gem@ querida amiga ;)

Responder
Admin

Ahora puse los títulos en mayúsculas y así ocupan un poco mas de espacio :o
Si querés miralo y me decís que te parece si?

Besitos ;)

Responder
Gem@

yz Hola Dña. Urraca es normal que ocurra porque al poner en los estilos de

.post img {
padding:4px;
background:#04B4AE;
border:4px solid #D0F5A9 ;
}
.post img:hover {
padding:4px;
background:#D0F5A9;
border:4px solid #04B4AE;
}

con eso estamos dando borde a todas las imágenes que se añaden en los pots.
En teoría la solución es añadir unos estilos para las imágenes que no deseamos adquieran el mismo borde de los pots, un ejemplo sería añadir la propiedad border none.
Digo en teoría porque no lo he probado, estos días accedo desde el portátil y la banda ancha la tengo muy limitada pero tengo interés en probar eso que te digo así que en nada que pueda no voy a hacer.
Si mientras tanto lo solucionaras házmelo saber ;)

yz Nessa tu problema lo vería mejor si me instalara tu plantilla, pero hasta dentro de 10 días no voy a poder porque me conecto con el tiempo justo (estoy fuera de casa) si lo deseas mándala y cuando vea algo y te comento.
Si lo solucionas por otra vía por favor me lo dices y así dedicamos el tiempo a otro tema :D

yz Gracias a ti Juliana Sardinha eres muy amable :D

yz k_nelita ¿sabes? la semana pasada el autor del blog de la semana me comentó lo mismo,recibió muchas vistas desde este blog y eso me encanta de veas :D
Sobre la widetab todo juega enconsonancia de las medidas que tiene es decir 390px.
La anchura de cada pestaña depende del tamaño del texto, en mayúsculas pienso que ocupa mayor espacio, para añadir nuevas pestañas sería necesario que el texto fuera más corto o sustituirlo por un tamaño menor.
Besotes amiga!!
En esta entrada verás como se añaden nuevas pestañas:

http://gemablog-.blogspot.com/2008/08/widebar-con-pestaas.html
El cambio me ha parecido muy acertado, es mucho más cómodo de leer sin tener que utilizar las barras de scroll :D

Responder
Gem@

yz Dña. Urraca quise decir "en nada que pueda lo voy a hacer" :S

Responder
Unknown

huyyyyyyy que has jugado con el border-radius, probaré -lo tenía antes, pero me parecía algo sozo- a jugarrrrrrrr :)
Besitos tesoro

Responder
EM2.0

Ya lo se cariño, las "letras bailarinas", le pasa a todo el mundo.
Si lo soluciono serás la primera en saberlo. Besos.

Responder
Nathan yo

Gema tengo un grabe problema hace dos días cambie mi plantilla y ahora los títulos (de los posts) han desaparecido solo se ve el del primer post por fa AYUDA...

Responder
alvaro

Hola Gema. Hace unas entradas te preguntaba como cambiar el formato de comentarios de blogspot a wordpress. Es decir, no quiero que hayan anonimos, pero tampoco quiero hacer a la gente de que creen una cuenta google para comentar. Para resumir, quiero esto:

Nick: (Requerido)
Correo: (Requerido, no será publicado)
Url:

Y me dijiste que buscara por zona cerebral pero es que no lo encuentro.

Me sería de gran ayuda si hicieras un post. Me gusta como te explicas. Gracias.

Saludos.

Responder
Bonzu Pipinpadaloxicopolis III

Hola Gem@
¿Y si le añadimos un borde con curvas a cada gadget?
Estuve probando y creo que estos datos son los mínimos

#sidebar .widget-content {
border: 2px solid #000000;
border-top:0px;
-moz-border-radius:0px 0px 10px 10px;
padding:4px;
}

#sidebar h2 {
border: 2px solid #000000;
border-bottom:0px;
-moz-border-radius:10px 10px 0px 0px;
margin:0;
}

Añadimos un borde a el div contenedor del gadget, curvamos las esquinas excepto las dos superiores. Al título le hacemos lo opuesto, curvamos las esquinas superiores y quitamos el borde inferior. Quizáno siempre se cierre el cuadro pero eso ya depende de ajustar el padding y margin.

Responder
DJ TXOKY

Plas,plas,plas gema,la verdad que este post me a venido que ni a pedir de boca,gracias por esa valiosa e importante informacion sobre las esquinas redondeadas,te mando un saludo muy fuerte y aunque no te mandaba un saludo por mi escaso tiempo, decirte que sigues tan genial e innovadora como siempre,diciendote una vez mas, gracias por tu dedicacion,nos haces a muchos las mejores exibiciones de buena maestra y gran profesional de un campo dificil,que al menos a mi se me hace como alumno,bastante mas facil gracias a tu ayuda.
Estoy en http://txoky.blogspot.com/ y estas invitada siempre que lo desees.
Gracias Maestra ¡¡¡¡Buen post

Responder
Bocha

Gema una pregunta...

Como hago para que en mi footer (el que esta dividido en tres) se puedan ver los numeros de los comentaristas, ya que estos quedan cortados.
Fijate la foto: http://img132.imageshack.us/img132/108/564645.png

Trate con el padding de #col1{ pero al modificarlo se me desconfiguraba la parte de arriba de los titulos de dicho sector.

Que hago??

Responder
Gem@

yz Graciela no es dificil si nos guiamos paso a paso, para curiosear "jugar" puedes intentarlo en un blog de pruebas así evitamos sustos mayores ;)

yz Dña. Urraca estuve leyendo detenidamente lo que me comentabas sobre el borde de esos botones, y me preguntaba por qué no pruebas a hacerlo añadiendo unos estilos distintos a esas imágenes que añades y no desas tengan borde, es decir añadir la propiedad border none.
Justo después de
.post img:hover {
padding:4px;
background:#D0F5A9;
border:4px solid #04B4AE;
}

añade:

.imagen-sin-borde {
border-style: none !important;
padding:10px;
}

Y luego cuando añades esas imágenes sin borde lo haces de esta forma:

<div class=" imagen-sin-borde"><b>En este espacio insertas el código de esos botones</b></div>
Es cuestión de mirar en vista previa

yz Global Metion Blog, lo ideal sería que pudieras comprobar la demo de la plantilla original, incluso instalarla de nuevo en un blog de pruebas para descartar que el problema no es la plantilla.

yz Álvaro tendré en cuenta tu sugerencia ;)

yz Bonzu Pipinpadaloxicopolis III se pueden redondear las cuatro esquinas del widget, las superiores inclusive si lo hacemos en

.sidebar .widget {
padding:0 0 1.5em;
margin:0 0 1.5em;
border: solid #B0171F; 4px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
} de esta forma envolvemos todo con el borde y no hay necesidad de añadirlo al título.

El título podemos ladearlo un poco a la derecha con padding-left:35px por ejemplo.
De todas formas según la vista previa podemos ir probando.
No recuerdo ahora la entrada pero esto lo expliqué anteriormente, son ideas que podemos ir practicando y hay muchas para empezar :)

yz ¡¡El TXOKY!! me alegra verte y saber que sigues ahí ¿cómo estás? espero que bien y con ese buen humor que siempre te caracteriza.
Gracias, mil veces gracias por tu amable comentario.
¿Sabes? las cosas no son tan complicadas, somos nosotros quienes las complicamos, es cuestión de ir paso a paso un poquito como en la vida :D
Un abrazo y gracias por estar :D

yz Bocha el contenido de ese espacio viene en los estilos definido con "col1" puedes hacer una prueba y darle más espacio a la izquierda añadiendo también padding-left:25px; ;)

Responder
Gem@

yz Dña. Urraca puedes quitar esas etiquetas <b> y </b> eran para resaltar en negrita el texto y se colaron

<div class=" imagen-sin-borde">En este espacio insertas el código de esos botones</div>

Responder
Bocha

Mira Gema, coloque lo que me dijiste, el padding-left:25px;

Y logre correr el numero de los comentaristas, aunque tambien se movio el H2 (el titulo de cada elemento del footer) y yo quiero que el H2 quede igual que antes...

Responder
Dabid

Hola de nuevo Gema. He leido que tuvistes que salir de viaje, no tiene importancia. Cuando puedas podrías leerlo y contestarme? seguro que tiene una solución muy facil. Gracias!

Responder
Gem@

yz Bocha modifica el padding del título, lo tienes ahora de esta forma 3px 15px 3px 15px mirando de izquierda a derecha esos valores están definidos para dar espacio al contenido de la siguiente forma "arriba, derecha, abajo, izquierda"

yz Aitz-Bilbo no me olvido de ello, nada más pueda acceder a tu blog lo miro ;)

Responder
Filigrana

Hola Gem@! Soy Gabuleta, pero con otro blog. Gracias a toda tu ayuda pude terminar mi blog, el que podés ver en mi perfil, el de esta cuenta. Es el blog definitivo, y quería invitarte a que lo veas porque no hubiera sido posible sin tu ayuda.
Le etoy cargando los contenidos de a poco, pero lo que quería era que vieras como quedó la plantilla! Estoy re contenta con el menú!!!
Miles de gracias por tu ayuda, y te quería decir de paso que si alguna vez necesitas ayuda con algo de photoshop, que te cree alguna imagen, o lo que sea, de mas está decir que me pidas y te ayudaré con todo gusto, como vos nos ayudas a todos!
Gracias por todo.

Gabuleta.

Responder
Mauri

... y mi otra pregunta :D (la otra quedo guardada en la entrada anterior) ... como puedo hacer que en el gadget "seguidores" se vean todos?? (tengo un recuadro pequeñito y no se ve casi nadie ) ... gracias, y disculpa las molestias (vivo en medio del campo; a quien le pregunto estas cosas .. JAJ!)

Responder
Gem@

yz Gabuleta ¡menuda sorpresa niña!! ha quedado fantastico de verdad, me encanta eres una artista creando imágenes y con el diseño.
Gracias por avisarme ¿sabes? creo que es buena idea darlo a conocer como blog de la semana así motivamos un poco al personal :D
Gracias también por el ofrecimiento ¿por qué no? a lo mejor un día te pido hagas algo para una de esas plantillas que me gusta "diseñar" pero les falta la gracia de las imágenes ;)

yz Hola juan_santiago el tema del gadget de seguidores es un misterio, a veces se soluciona limpiado la caché del navegador otras ni con eso :(
El caso que yo he mirado tu blog y lo veo perfectamente todos los cuadritos están ocupados con el avatar de los seguidores, quizás sea el navegador que usas que sea necesario actualizarlo, con Firefox se ve perfecto :D

Responder
Filigrana

Gracias Gema! Gracias de verdad por toda la buena onda y el apoyo!!! Me pone muy feliz que te haya gustado.
Estoy a tu disposición para lo que necesites!
Muchos besos.

Gabuleta.

Responder
EM2.0

Se que soy muy cenutria pero el div es para que lo ponga en la misma entrada no en la plantilla verdad??, si es así no ha funcionado si no es así y es en la plantilla no se donde colocarlo.

Responder
JLAH

Hola Gema,

Aquí dando molestias.

Mira te cuento que recién empecé a usar tu código para poner texto en DOS COLUMNAS, pero en la columna del lado derecho, el texto de baja una línea.

Tienes idea cómo puedo reparar eso?

Gracias y ojalá puedas ayudarme.

Dejo la direcci+on del enfermo para su revisión.

http://reporterosinfronteras.blogspot.com/

Regreso...

Responder
Gem@

yz Dña. Urraca, el error ha sido mío que no te lo expliqué bien.
Mira la siguiente url, es un blog de pruebas donde te lo explico más detallado ;)
http://dividiendoelheader.blogspot.com/

yz Banco de Imágenes Gratuitas, yo veo ese blog bien sanito, con un pequeño error que se aprecia en el código fuente de esa entrada.
Se trata de lo siguiente, cuando creamos el bloque del div derecho debe ir a continuación del cierre del div izquierdo es decir sin saltos de línea.
Su texto en html dice algo así:
....el cual a través de los años, se ha convertido en una de las mayores atracciones de la ciudad de <b>Quebec</b>.</div></div><br>
<div style="float: right; width: 48%;"><div style="text-align: justify;"> El hotel fue diseñado...

Para que los dos textos queden a la misma altura cuidaremos que ese salto de línea no se produzca, si es necesario daremos salida al post desde Edición de HTML y añadiremos el contenido del div derecho seguido del cierre del izquierdo:
...el cual a través de los años, se ha convertido en una de las mayores atracciones de la ciudad de <b>Quebec</b>.</div></div><div style="float: right; width: 48%;"><div style="text-align: justify;"> El hotel fue diseñado...

Responder
Gem@

yz Filigrana veo tu comentario ahora, siento si no fue respondido en su momento :)

Responder
Smark

muchas gracias, esto me ayudara para el efecto redondeado que tanto me cuesta lograr :)

saludos y que estes bien Gem@

Responder
Gem@

yz Saludos Smark me alegra que te sea útil ;)

Responder
Raúl Montero

Ya lo he probado en una plantilla y queda muy bien!! un saludo.

Responder
Gem@

yz Estupendo Raúl, gracias por venir a contarlo ;)

Responder
La Trucoteca

Hola Gema!!!
Que buen truco. Estaba buscando una cosa asi, sin tener que crear ninguna imagen, y esto me viene de maravilla. En IE es verdad que no funciona, pero bueno, ya es hora de ir pasandose a Firefox.
Lo implemente en los titulos de la sidebar en mi blog de Tenis en TV.
Muchas gracias por tu magnifica aportación!!!
Saludos!

Responder
Gem@

yz La Trucoteca de Blogs me alegra que te resultara bien :)

Responder
Nicole

Gracias :D
siempre hay una solución :)

Responder
Gem@

yz Soluciones "casi" siempre hay Strokera, sólo falta que sean las que buscamos ;)

Responder
Venezuela en vinilos

Gema una consulta... quiero en mi sidebar algo que he visto en Tecnobita

Algo así como tres elementos en uno, es decir, muestran información de tres cosas diferentes, pero dentro del mismo gadget en la sidebar(al menos eso me hace ver). Ejemplo : Categorias - sitios amigos - archivos.

¿Seria posible hacer eso en Blogger?

Otra pregunta, veo que a tus elementos les tienes bordes diferentes a cada uno, siempre he querido colocarle bordes pero solo a un gadget y no a toda la sidebar.. Help me .. saludos

Responder
Gem@

:: Venezuela en vinilos puedes ver algo por el estilo %% aquí

Responder
Anónimo
Este comentario ha sido eliminado por un administrador del blog.
Responder
Public Desing

me gustaria saber como darle forma al parrafo que metere dentro de un div que le he dado

width:180px;
height:180px;
border-radius: 2em 5em 0.5em 5em;


me gustaría adaptar el texto a la forma que tiene

Responder
Gem@

:: Public Desing puede hacerse añadiendo el div al editor de entradas, desde ahí controlamos los estilos de texto o con la etiqueta span:
http://gemablog-.blogspot.com/2009/03/la-etiqueta-span-y-los-estilos.html

Responder
Mary

Hola y si quiero el borde a todo el blog? es decir en vez de cuadrado redondeado?

Gem@

Mary Ann de qué blog hablamos??

Mary

Es en blogger, tengo la plantilla simple, pero no me sale ni Outer-wrapper o como se diga :P ni nada de eso, quisiera redondear las esquina del blog ej.http://i40.tinypic.com/28inqe8.png


Besos!

Gem@

Tengo que ver el blog Mary, miré en tu perfil y hay varios.
Imagino que puede ser una de las nuevas plantillas aparecidas hace un año y el esquema es distinto a las antiguas.

Responder
agustina.

Cuando busco #sidebar-wrapper me dice que no aparece, ¿puede ser por que hace poco me pusieron el nuevo blogger? Necesito ayudaaaaaa, como puedo hacer para tener las esquinas redondeadas?

Responder
Gem@

No Δ g u s † i n a la interfaz del blog no tiene nada que ver con la plantilla son cosas independientes, la interfaz es como la fachada de una casa y la plantilla el interior de ella.
Dime de qué blog estamos hablando y vemos donde está :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top